<template>
  <div class="wrapper" style="padding: 10px">
    <div style="text-align: center">
      <span style="float: left" @click="back">
        <svg
          t="1611145088338"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1760"
          width="20"
          height="20"
        >
          <path
            d="M475.9 193.8L182.7 487H937v50H182.7l293.2 293.2-35.4 35.4L87 512l353.6-353.6 35.3 35.4z"
            fill=""
            p-id="1761"
          ></path>
        </svg>
      </span>
      <span style="font-weight: bolder; color: black">帖子详情</span>
      <span v-if="arr.userName == $store.state.data.userName"
        ><van-icon
          name="delete-o"
          @click="delCard"
          style="vertical-align: middle; float: right; font-size: 18px"
      /></span>
    </div>
    <div style="clear: both; margin: 20px">
      <h2>{{ arr.title }}</h2>
    </div>
    <div>
      <div style="margin: 10px 0">
        <van-image
          round
          width="30px"
          height="30px"
          style="vertical-align: middle"
          :src="arr.avatar"
        />
        <span style="margin-left: 5px">{{ arr.userName }}</span>
      </div>
      {{ arr.intro }}
    </div>
    <div style="margin: 10px 0">
      <img :src="arr.coverImgUrl" alt="" style="width: 100%" />
    </div>
    <!-- 评论 -->
    <div style="background: #f5f7fa; padding: 10px">
      <h2><b>评论</b></h2>
      <!-- 发表评论 -->
      <div class="comment">
        <div class="commentBody">
          <van-field
            v-model="message"
            rows="1"
            autosize
            label="评论"
            type="textarea"
            placeholder="请发表评论"
          />
          <van-button type="info" style="float: right" @click="add"
            >发布</van-button
          >
        </div>
      </div>
      <!-- 所有的评论 -->
      <div
        v-for="(item, index) in list"
        :key="index"
        style="
          clear: both;
          border: 1px solid #ccc;
          padding: 10px 10px;
          margin-bottom: 10px;
          border-radius: 10px;
          background: rgba(245, 222, 179, 0.26);
        "
      >
        <div>
          <van-image
            round
            width="40px"
            height="40px"
            style="vertical-align: middle"
            :src="item.avatar"
          />
          <span>&nbsp;&nbsp;{{ item.userName }}</span>
        </div>
        <div style="padding: 10px 10px 0 30px">
          <p>{{ item.commentContent }}</p>
          <p style="text-align: right">
            <span>{{ item.createdTime }}</span>
            <span style="margin-left: 10px">
              <!-- 删除 -->
              <span
                @click="del(item.commentId)"
                v-if="$store.state.data.userName == item.userName"
                ><van-icon name="delete-o" style="vertical-align: middle"
              /></span>
              <!-- 回复 -->
              <span v-else @click="Reply(index)"
                ><svg
                  t="1611044579018"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1777"
                  width="14"
                  height="14"
                >
                  <path
                    d="M624.128 424.448c-22.528 0-33.792 9.728-33.792 29.184V512c0 19.456 11.264 29.184 33.792 29.184 22.528 0 33.792-9.728 33.792-29.184v-58.368c0-19.456-11.264-29.184-33.792-29.184z m-224.256 0c-22.528 0-33.792 9.728-33.792 29.184V512c0 19.456 11.264 29.184 33.792 29.184s33.792-9.728 33.792-29.184v-58.368c-0.512-19.456-11.776-29.184-33.792-29.184zM153.6 856.064L115.2 934.4c-11.264 13.312-13.824 32.256-6.144 48.128s23.552 26.112 40.96 26.112H512c273.92 0 496.64-222.72 496.64-496.64S785.92 15.36 512 15.36 15.36 238.08 15.36 512c0 128 49.152 251.392 138.24 344.064z m64.512 79.872c18.944-46.592 22.016-95.232-12.288-130.56C130.048 726.528 87.552 621.056 87.552 512c0-233.984 189.952-423.936 423.936-423.936S935.424 278.016 935.424 512 745.472 935.936 511.488 935.936H218.112zM512 719.872c32.768 0 64-16.384 84.992-44.544 3.584-4.608 3.072-11.264-1.024-14.848-1.536-1.536-3.584-2.56-6.144-2.56s-5.632 1.536-7.168 3.584c-17.92 23.552-44.032 37.376-71.168 37.376-27.648 0-53.248-13.312-71.168-37.376-2.048-2.56-4.608-3.584-7.168-3.584-2.048 0-4.096 1.024-6.144 2.56-2.048 2.048-3.072 4.608-3.072 7.168 0 2.56 0.512 5.632 2.048 7.68C448 704 479.232 719.872 512 719.872z"
                    p-id="1778"
                  ></path></svg
              ></span>
            </span>
          </p>
          <!-- 点击回复图标出来的文本框 -->
          <div v-show="flag == index" class="commentBody">
            <van-field
              v-model="message1"
              rows="1"
              autosize
              label="回复"
              type="textarea"
              placeholder="请输入回复内容"
            />
            <van-button
              type="info"
              style="float: right"
              @click="addReply(item.commentId, index)"
              >回复</van-button
            >
          </div>
          <!-- 点击回复按钮之后出来的回复评论的文本框 -->
          <div v-show="flag1 == index">
            <h3 style="margin: 5px 0">回复详情</h3>
            <div
              v-for="(item1, index1) in arr1"
              :key="index1"
              style="
                border: 1px solid #ccc;
                border-radius: 10px;
                margin-bottom: 10px;
                padding: 10px 10px;
              "
            >
              <div>
                <van-image
                  round
                  width="40px"
                  height="40px"
                  style="vertical-align: middle"
                  :src="item1.avatar"
                />
                <span>
                  &nbsp;&nbsp;<span style="color: #d9ad7f">{{
                    item1.userName
                  }}</span>
                  &nbsp;&nbsp;回复 &nbsp;&nbsp;<span style="color: #d9ad7f">{{
                    item.userName
                  }}</span></span
                >
              </div>
              <div style="padding: 5px 5px 5px 25px">
                <p>{{ item1.commentContent }}</p>
                <p style="text-align: right">
                  {{ item1.updatedTime }}

                  <span
                    @click="del1(item1.commentId, item.commentId)"
                    v-if="$store.state.data.userName == item1.userName"
                    ><van-icon name="delete-o"
                  /></span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import {
  detail,
  commentDetail,
  append,
  Del,
  reply,
  replyList,
  Delcard,
} from "../api/api";
export default {
  data() {
    return {
      arr: [],
      list: [],
      message: "",
      message1: "",
      flag: null,
      flag1: null,
      arr1: [],
    };
  },
  methods: {
    // 返回
    back() {
      this.$router.go(-1);
    },
    // 删除帖子
    delCard() {
      if (this.$store.state.isLogin == true) {
        Dialog.confirm({
          message: "确定删除帖子吗",
        })
          .then(() => {
            Delcard(this.$route.query.id).then(() => {
              console.log(this.$route.query.id);
              Toast("删除成功");
              this.$router.go(-1);
            });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    // 发表评论
    add() {
      // 判断是否登录
      if (this.$store.state.isLogin == true) {
        if (this.message == "") {
          Toast("评论为空");
        } else {
          append(this.$route.query.id, this.message).then(() => {
            // console.log(res);
            Toast("发表成功");
            this.message = "";
            // 评论详情
            commentDetail(this.$route.query.id).then((res) => {
              // console.log(res);
              this.list = res.rows.reverse();
            });
          });
        }
      } else {
        // 没登录弹登录
        this.$router.push("login");
      }
    },
    // 删除评论
    del(commentId) {
      if (this.$store.state.isLogin == true) {
        Del(commentId).then(() => {
          // console.log(res);
          Toast("删除成功");
          // 评论详情
          commentDetail(this.$route.query.id).then((res) => {
            // console.log(res);
            this.list = res.rows.reverse();
          });
        });
      } else {
        // 没登录弹登录
        this.$router.push("login");
      }
    },
    // 删除回复评论
    del1(commentId, commentId1) {
      Del(commentId).then(() => {
        // console.log(res);
        // 回复评论详情
        Toast("删除成功");
        replyList(commentId1).then((res) => {
          console.log(res);
          this.arr1 = res.rows;
        });
      });
    },
    // 点击回复
    Reply(index) {
      if (this.$store.state.isLogin == true) {
        this.flag = index;
        this.message1 = "";
      } else {
        // 没登录弹登录
        this.$router.push("login");
      }
    },
    // 点击发表回复
    addReply(commentId, index) {
      // 回复接口
      if (this.message1 == "") {
        Toast("回复为空");
        this.flag = index;
      } else {
        this.flag1 = index;
        this.flag = null;
        reply(this.$route.query.id, commentId, this.message1).then(() => {
          // console.log(res);
          Toast("回复成功");
        });
        // 查看回复评论列表
        replyList(commentId).then((res) => {
          // console.log(res);
          this.arr1 = res.rows;
        });
      }
    },
  },
  created() {
    detail(this.$route.query.id).then((res) => {
      // console.log(res);
      this.arr = res.data;
    });
    // 评论详情
    commentDetail(this.$route.query.id).then((res) => {
      // console.log(res);
      this.list = res.rows.reverse();
    });
  },
};
</script>
<style scoped lang="less">
.comment {
  width: 100%;
  z-index: 2;
  position: fixed;
  left: 0;
  bottom: 0;
}
.commentBody {
  position: relative;
}
/deep/.van-button--info {
  position: absolute;
  top: 0;
  right: 0;
}
/deep/.van-field__label {
  width: 35px;
}
/deep/.van-tabs__line {
  background-color: deepskyblue;
}
</style>